<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j component-search-drop-down-bar">
    <view class="search-input-con">
      <uni-data-select
        v-model="value"
        :localdata="range"
        :placeholder="selectPlaceholder"
        :clear="false"
        @change="change"
      />
      <input
        v-model="queryString"
        class="search-input"
        type="text"
        :placeholder="placeholder"
        placeholder-class="placeholder-class"
        @confirm="handleSearch"
      >
    </view>
  </view>
</template>

<script setup>
import { reactive, watch } from 'vue'
const emit = defineEmits(['handleSearch', 'handleChange'])

const props = defineProps({
  keyWord: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入关键字'
  },
  selectPlaceholder: {
    type: String,
    default: '请选择'
  },
  range: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const Data = reactive({
  value: 1,
  queryString: ''
})

const { queryString, value } = toRefs(Data)

watch(() => props.keyWord, (val) => {
  Data.queryString = val
}, { immediate: true })

const handleSearch = () => {
  emit('handleSearch', Data.queryString)
}

const change = (e) => {
  emit('handleChange', e)
}

</script>

<style lang="scss" scoped>
.component-search-drop-down-bar {
  width: 100%;

  .search-input-con {
    display: flex;
    align-items: center;
    padding: 10rpx auto;
    width: 100%;
    height: 64rpx;
    background: #F7F8FA;
    border-radius: 32rpx;

    :deep(.uni-stat__select) {
      padding: 0 0 0 30rpx;

      .uni-stat__actived {
        outline: none;
      }

      .uni-select {
        border: none;
        padding: 0;

        .uni-select__input-box {
          min-height: 34rpx;

          .uni-select__input-text {
            font-size: 24rpx;
            width: 78rpx
          }

          .uni-icons {
            margin-top: 8rpx;
          }
        }

        .uni-select__selector {
          left: -30rpx;
          width: 152rpx;
          border-radius: 2px;

          .uni-popper__arrow {
            display: none;
          }

          .uni-select__selector-item {
            padding: 0;
            margin: 0 20rpx;
            font-size: 24rpx;
            display: flex;
            justify-content: center;
            border-bottom: 1px solid #F2F2F2;
          }

          .uni-select__selector-item:last-child {
            border-bottom: none;
          }
        }
      }
    }

    .search-input {
      margin: 0 30rpx 0 12rpx;
      font-size: 24rpx;
      width: 100%;
    }

    :deep(.placeholder-class) {
      color: #999999;
    }
  }
}
</style>
